import { FieldTemplateProps } from '@rjsf/utils';
import React, { createContext, useEffect } from 'react';
import { Collapse } from 'antd';
import './style.scss';
import { useFocusStore } from '../../common/store';

export const MessageContext = createContext({
  layout: null,
  labelW: null,
});

// 折叠面板
export const CollapseTemplate = (props: FieldTemplateProps) => {
  const { setFocused } = useFocusStore();

  useEffect(() => {
    props.uiSchema?.['ui:selectKey'] &&
      setFocused(props.uiSchema['ui:selectKey']);
  }, []);

  const items = [
    {
      key: '1',
      label: props.label,
      children: (
        <MessageContext.Provider
          value={{
            layout: props.uiSchema?.['ui:layout'],
            labelW: props.uiSchema?.['ui:labelW'],
          }}>
          {props.children}
        </MessageContext.Provider>
      ),
    },
  ];

  return (
    <Collapse
      defaultActiveKey={['1']}
      className='collapse'
      ghost
      items={items}
    />
  );
};
